BB HUD THEME KIT
================

A HUD theme is a folder of PNG pictures plus two colours. The same theme shows in all three Home layouts the
HUD offers (Classic, Side menu, Portrait - each player picks one, or uses the sim's); these templates show
where every picture goes in each of them.


WHAT'S IN HERE

  1 Classic.psd       Home in the Classic layout          1024 x 512
  2 Side menu.psd     Home in the Side menu layout        1024 x 512
  3 Portrait.psd      Home in the Portrait layout         1024 x 512
  4 Full page.psd     A full-height page                  1024 x 1024
  Guides\            The same guides as plain PNGs (for editors without layers) and a preview of each
  Parts\             Every picture a theme uses, taken from the Default theme. Replace each one with your
                      own and keep the file name.
  Parts sheet.png     What each picture is, the size it's shown at and where it shows
  Colours.txt         The two colours to send with your pictures

The .psd files open in Photoshop, GIMP, Krita and Photopea (free, in a web browser: photopea.com).


THE LAYERS (top to bottom)

  Finished look (hidden)   The Default theme as it really looks, to compare with.
  Guide                    Boxes and sizes. Pink: a picture you make. Blue: an icon. Yellow: the HUD draws it
                           itself in your colours. White dots: open space where your background shows.
                           Hide it before you save anything.
  Other pages (hidden)     The Back and Home buttons along the bottom of every page except Home.
  HUD draws this           Text, bars, notices and (Side menu, Portrait) the panels. The HUD draws these on top
                           of your art; don't paint them. Keep it on while you paint, to see what will be covered.
  Icons                    The icons, where they sit.
  Theme parts (Classic)    The name plate, bar frames and buttons, where they sit.
  Background.png           Your background. Paint here.


HOW TO MAKE A THEME

  1. Paint the background on the "Background.png" layer of the layout your sim uses. The background is the
     same in every layout, so if players can switch layouts, check it behind all three.
  2. Hide every other layer and save it as Background.png, 1024 x 512.
  3. Do the same in "4 Full page.psd" for Background-Square.png, 1024 x 1024 (pages opened full height).
     You can leave this one out: the HUD then stretches Background.png.
  4. Make the pictures in Parts\Images, keeping each file name. In Classic.psd you can paint them in place on
     the "Theme parts" layer, then crop each one out at the size the guide shows.
  5. Make the icons in Parts\Icons: 128 x 128, see-through background. Simple shapes in one light colour
     read best: on the highlighted Portrait button the HUD shows the icon as a solid black or white shape.
  6. Fill in Colours.txt.
  7. Zip the Images folder, the Icons folder and Colours.txt and send them to the sim's staff.


RULES OF THUMB

  - PNG files. Everything outside a button's shape is see-through; the two backgrounds are solid.
  - Pictures are stretched to the size they're shown at. Make each one at that size (or twice it, for
    sharpness), so it isn't squashed. The sizes are on the guide and in Parts sheet.png.
  - Button.png is also drawn "9-slice" in dialogs: the outer 16 pixels on each side keep their shape and the
    middle stretches. Keep the corners and frame inside that 16-pixel border.
  - Keep the background calm where text sits. The HUD's text is white, or dark on a light accent colour.
  - In Second Life the HUD shows exactly 1024 x 512 (1024 x 1024 when a page goes full height).
  - Text, bars, notices and the Side menu and Portrait panels are drawn by the HUD in your colours - they
    aren't pictures, so you don't make them.


FOR THE SIM'S STAFF

  The pictures go in a new folder in the HUD's Hud-Themes folder: <Name>\Images and <Name>\Icons.
  The colours are set on the website: Settings > HUD themes (Accent and Panel).
